<!--  -->
<template>
  <div class="container">
    <!-- 导航栏 -->
    <van-nav-bar class="embar">
      <van-button
          slot="title"
          class="search-btn"
          icon="search"
          size="small"
          to="/emsearch"
      >搜索
      </van-button>
    </van-nav-bar>

    <van-row class="title">
      <div class="inlinetitle">
        <!-- <div><span>应急管理特色资源数据库</span></div>
          <div><span>5.12汶川特大地震(绵阳)数据库</span></div> -->
      </div>

    </van-row>

    <van-grid :border="false" :column-num=5>
      <van-grid-item icon-prefix='iconfont' icon="icon_rdgz" :to="{name:'emcls', params:{clsname:'热点关注',code:'ca201'}}"
                     text="热点关注"/>
      <van-grid-item icon-prefix='iconfont' icon="icon_kzjz" :to="{name:'emcls', params:{clsname:'抗震救灾',code:'ca202'}}"
                     text="抗震救灾"/>
      <van-grid-item icon-prefix='iconfont' icon="icon_zhcj" :to="{name:'emcls', params:{clsname:'灾后重建',code:'ca203'}}"
                     text="灾后重建"/>
      <van-grid-item icon-prefix='iconfont' icon="icon_fzzx" :to="{name:'emcls', params:{clsname:'发展振兴',code:'ca204'}}"
                     text="发展振兴"/>
      <van-grid-item icon-prefix='iconfont' icon="icon_yjcg" :to="{name:'emcls', params:{clsname:'研究成果',code:'ca205'}}"
                     text="研究成果"/>
    </van-grid>
    <van-cell-group title="热点关注">
      <template #title>

        <van-cell class="more" title="热点关注" is-link :border=false
                  :to="{name:'emcls', params:{clsname:'热点关注',code:'ca201'}}" value="更多"/>
      </template>
      <ArticleItem v-for="(item,index ) in hotspots" :article="item" :key="index"/>

    </van-cell-group>


    <van-cell-group title="抗震救灾">
      <template #title>

        <van-cell class="more" title="抗震救灾" is-link :to="{name:'emcls', params:{clsname:'抗震救灾',code:'ca202'}}"
                  :border=false value="更多"/>
      </template>
      <van-swipe :loop="false" :autoplay="3000" :width="200" :show-indicators='false'>
        <van-swipe-item class="kzjztp" v-for="(item,index) in kzjz" :key="index">
          <van-image
              class="right-cover"
              fit="cover"
              :src="getsrc(item)"
              @click="bigpic(item)"
          />
          <div class="van-multi-ellipsis--l2">{{ item.title }}</div>
        </van-swipe-item>


      </van-swipe>
    </van-cell-group>


    <van-cell-group title="灾后重建">
      <template #title>

        <van-cell class="more" title="灾后重建" is-link :to="{name:'emcls', params:{clsname:'灾后重建',code:'ca203'}}"
                  :border=false value="更多"/>
      </template>
      <van-swipe :loop="true" :autoplay="3000" :show-indicators='false'>
        <van-swipe-item v-for="(item,index) in zhcj" :key="index">
          <div class="zhcjimg">
            <van-image
                class="right-cover"
                fit="cover"
                @click="playvideo(item)"
                :src="getsrc(item)"
            />
            <span class="playbtn" @click="playvideo(item)"><van-icon size="60" color="#fff" name="play-circle"/></span>

            <div class="van-multi-ellipsis--l2 zhcjtext">{{ item.title }}</div>
          </div>
        </van-swipe-item>


      </van-swipe>
    </van-cell-group>
    <van-cell-group title="发展振兴">
      <template #title>
        <van-cell class="more" title="发展振兴" is-link :to="{name:'emcls', params:{clsname:'发展振兴',code:'ca204'}}"
                  :border=false value="更多"/>
      </template>
      <van-swipe :loop="false" :width="200" :show-indicators='false'>
        <van-swipe-item class="kzjztp" v-for="(item,index) in fzzx" :key="index">
          <van-image
              class="right-cover"
              fit="cover"
              :src="getsrc(item)"
              @click="bigpic(item)"
          />
          <div class="van-multi-ellipsis--l2">{{ item.title }}</div>
        </van-swipe-item>

      </van-swipe>
    </van-cell-group>


    <van-cell-group>
      <template #title>
        <van-cell class="more" title="研究成果" is-link :to="{name:'emcls', params:{clsname:'研究成果',code:'ca205'}}"
                  :border=false value="更多"/>

      </template>
      <van-tabs v-model="active">
        <van-tab>
          <template #title>
            <van-icon name="more-o"/>
            绵阳研究
          </template>

          <van-cell v-for="(item,index) in myyj" @click="gotodetail(item)" :key="index" :title="item.title"
                    >
<template #label>
           <span class="sml">{{item.publishTime}}</span>
           <span class="sml">{{item.dataSource}}</span>
           <span class="sml">{{item.author}}</span>
  </template>
          </van-cell>

        </van-tab>


        <van-tab>
          <template #title>
            <van-icon name="more-o"/>
            全国研究
          </template>

          <van-cell v-for="(item,index) in qgyj" :key="index" :title="item.title" :label="item.publishTime"
                    @click="gotodetail(item)"
          >
          <template #label>
           <span class="sml">{{item.publishTime}}</span>
           <span class="sml">{{item.dataSource}}</span>
           <span class="sml">{{item.author}}</span>
  </template>
           </van-cell>
        </van-tab>
      </van-tabs>


    </van-cell-group>

    <van-popup closeable
               close-icon-position="top-right" v-model="showvvedio" v-if="showvvedio" position="right"
               :style="{ height: '100%',width:'100%' }">

      <div class='demo'>
        <videobox :poster="poster" :title="videotitle" :sources="sources"></videobox>
      </div>
    </van-popup>
  </div>
</template>

<script>

import videobox from '@/components/video.vue'
import {ImagePreview} from 'vant';
import yjglconfig from '@/utils/yjglconfig'
import {GetVideo, GetIndexData, GetPicture} from '@/api/emergency'
import ArticleItem from "./components/article-item"

export default {
  name: '',
  components: {ArticleItem, videobox},
  props: {},
  data() {
    return {
      active: 1,
      hotspots: [],//热点关注
      kzjz: [],//抗震救灾
      zhcj: [],//灾后重建
      fzzx: [],//发展振兴
      myyj: [],//绵阳研究
      qgyj: [],//全国研究
      poster: '',//封面
      sources: '',//视频地址
      videotitle: '',//视频标题
      getImh: yjglconfig.getImh,
      getVideoPic: yjglconfig.getVideoPic,
      getVideo: yjglconfig.getVideo,
      showvvedio: false,
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.gethotspots()
    this.getkzjz()
    this.getzhcj()
    this.getfzzx()
    this.getyjcg()
  },
  methods: {
    onSearch() {
      this.$router.push('emsearch')
    },
    //获取文献
    async GetIndexData(top, code) {
      var data = await GetIndexData({
        top: top,
        code: code
      })
      if (data.data.data) {
        var result = data.data.data
        return result
      }
    },
    //获取图片
    async GetPicture(top, code) {
      var data = await GetPicture({
        top: top,
        code: code
      })
      if (data.data.data) {
        var result = data.data.data
        return result
      }
    },
    //获取视频
    async GetVideo(top, code) {
      var data = await GetVideo({
        limitNumber: top,
        code: code
      })
      if (data.data.data) {
        var result = data.data.data

        return result
      }
    },

    //热点关注
    async gethotspots() {
      this.hotspots = await this.GetIndexData(4, 'ca201');
      // console.log('hotspots',this.hotspots);
    },
    //抗震救灾
    async getkzjz() {
      this.kzjz = await this.GetPicture(4, 'ca202');
     // console.log('抗震救灾', this.kzjz)
    },
    //灾后重建
    async getzhcj() {
      this.zhcj = await this.GetVideo(4, 'ca203');
      // console.log('getzhcj',this.zhcj)
    },
    //发展振兴
    async getfzzx() {
      this.fzzx = await this.GetPicture(4, 'ca204');
     // console.log('发展振兴', this.fzzx)
    },
    //绵阳研究
    async getyjcg() {
      this.myyj = await this.GetIndexData(4, 'ca20502');
      this.qgyj = await this.GetIndexData(4, 'ca20501');
      //console.log('全国研究',this.fzzx)
    },

    gotodetail(item) {
     // console.log(item)
      this.$router.push({
        path: '/article',
        query: {
          'fileName': item.fileName,
          'dataSource': item.dataSource,
          'tableName': item.tableName,
          'sysId': item.sysID
        }
      })
    },
    getsrc(item) {
      if (item.fileName) {
        if (item.dataSource == '绵阳党校图片库') {
          return this.getImh + item.fileName
        } else if (item.dataSource == '绵阳党校视频') {
          return this.getVideoPic + item.picAddress
        }
      }

    },
    playvideo(item) {

      this.poster = this.getVideoPic + item.picAddress
      this.sources = this.getVideo + item.fileName
     // console.log(this.poster, this.sources)
      this.showvvedio = true
      this.videotitle = item.title
    },
    bigpic(item) {
      ImagePreview({
        images: [
          this.getImh + item.fileName,
        ],
        closeable: true,
      });
    }

  }
}

</script>
<style lang='less' scoped>

.container {
  margin-bottom: 60px;
}

.container /deep/ .van-nav-bar__title {
  max-width: none;
}

.inlinetitle {
  padding-top: 20px;
}

.inlinetitle :first-child {
  padding-top: 10px;
}

.title > div :nth-child(2) {
  margin-top: 10px;
}

.title {
  height: 143px;
  // background-color: #999999;
  // color: #fff;
  // font-size: 16px;
  // text-align: center;
  // align-content: center;

  // vertical-align: middle;
  // margin-top: 10px;
  // margin-bottom: 10px;
  background: url('~@/assets/banner_yingji@2x.png');
  background-size: cover;
}

.van-card {
  background-color: #fff;
}

.more {
  background-color: #F5F7F9;
  padding: 0;
  font-size: 16px;
}

.van-swipe-item1 {
  margin-right: 10px;
}

.van-swipe-item {
  font-size: 14px;
}
.kzjztp{
  margin: 0 5px;
}
.search-btn {
  width: 100%;
  height: 32px;


  .van-icon {
    font-size: 16px;
  }

  .van-button__text {
    font-size: 14px;
  }

}

.sml{
  margin-right: 5px;
}

/deep/ .van-nav-bar__title {
  padding: 0 10px;
  width: 100%;
}

.playbtn {
  position: absolute;
  // width: 280px;
  // height: 280px;
  top: 75px;
  left: 45%;
  font-size: 60px;

}

.zhcjimg .van-image {
  width: 350px;
  height: 200px;

}

.zhcjimg {
  margin: 0 auto;
  text-align: center;

}

.zhcjtext {
  width: 350px;
}

.embar {
  background-color: #AF2536;
}

</style>
